<template>
	<div class="madp-product-management">
		<basic-container>
			<el-table
				:header-cell-style="{
					background: 'rgb(255, 191, 191)',
					color: 'rgb(44,44,44)',
				}"
				stripe
				:data="dateTableData"
			>
				<el-table-column label="序号" type="index" align="center"></el-table-column>
				<el-table-column label="模版类型" prop="q1" align="center"></el-table-column>
				<el-table-column label="banner" prop="q2" align="center"></el-table-column>
				<el-table-column label="文章链接模块" prop="q3" align="center"></el-table-column>
				<el-table-column label="热门推荐" prop="q4" align="center"></el-table-column>
				<el-table-column label="兴趣爱好" prop="q5" align="center"></el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.switchVal" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
					</template>
				</el-table-column>
			</el-table>
			<!-- 列表分页 -->
			<el-pagination
				background
				v-if="datePagination.total > 0"
				class="madp-black-pagination"
				@size-change="handleSizeChangeByDate"
				@current-change="handleCurrentChangeByDate"
				:current-page="datePagination.current"
				:page-sizes="[10, 20, 30, 50, 100]"
				:page-size="datePagination.size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="datePagination.total"
			></el-pagination>
		</basic-container>
	</div>
</template>
<script>
export default {
	data() {
		return {
			dateTableData: [
				{
					q1: '财经模版',
					q2: '顶部',
					q3: '下部',
					q4: '上部',
					q5: '右部',
					switchVal: false,
				},
				{
					q1: '贷款模版',
					q2: '中部',
					q3: '右部',
					q4: '上部',
					q5: '下部',
					switchVal: true,
				},
				{
					q1: '理财模版',
					q2: '左部',
					q3: '上部',
					q4: '下部',
					q5: '右部',
					switchVal: true,
				},
				{
					q1: '放款模版',
					q2: '右部',
					q3: '下部',
					q4: '上部',
					q5: '左部',
					switchVal: false,
				},
			],
			datePagination: {
				current: 1,
				size: 10,
			},
		};
	},
	filters: {},
	watch: {},
	created() {
		// dateType默认值为近一周
	},
	mounted() {},
	methods: {
		// 按日期查看 分页
		handleSizeChangeByDate(val) {
			this.datePagination.size = val;
			this.datePagination.current = 1;
		},
		handleCurrentChangeByDate(val) {
			this.datePagination.current = val;
		},
	},
};
</script>
<style lang="scss" scoped>
.madp-table-title {
	color: #333;
	font-size: 16px;
}
.madp-statistics-title {
	color: #333;
	font-weight: bold;
	font-size: 20px;
}
.madp-statistics-text {
	font-size: 12px;
	color: #666;
	padding-left: 5px;
}

.madp-horizontal-divider {
	width: 100%;
	height: 4px;
	margin: 20px 0;
	background-color: #f0f2f5;
}
.madp-gap-wrap {
	margin-top: 10px;
	.madp-statistics-table {
		margin-top: 20px;
	}
}
.madp-statistics-tabs {
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.madp-chart-form .el-form-item {
		margin-right: 20px;
		margin-bottom: 0;
	}
	.madp-date-select {
		width: 120px;
	}
	.el-date-editor--daterange.el-input__inner {
		width: 300px;
	}
	/deep/ .el-date-editor .el-range-separator {
		width: 25px !important;
	}
}
.madp-table-user-wrap {
	display: flex;
	align-items: center;
	.madp-table-avatar {
		display: block;
		width: 32px;
		height: 32px;
		object-fit: contain;
		margin-right: 10px;
		border-radius: 4px;
	}
	span.madp-table-avatar {
		background-color: #ed5555;
		text-align: center;
		line-height: 32px;
		color: #fff;
	}
}
/deep/ .el-button--primary.is-plain {
	background-color: #fff;
	border-color: #ed5555;
}
.madp-black-pagination {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	margin-top: 10px;
}
</style>
